<template>
    <el-drawer title="设置轮播图" v-model="dialogVisible" size="50%" destroy-on-close>
        <el-form :model="form" label-width="80px">
            <el-form-item label="轮播图">
                <ChooseImage :limit="9" v-model="form.banners" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script setup>
    import { ref, reactive } from "vue"
    import ChooseImage from "~/components/ChooseImage.vue";

    import {
        readGoods,
        setGoodsBanner
    } from "~/api/goods"
    import { toast } from "~/composables/util";

    const dialogVisible = ref(false)

    const form = reactive({
        banners: []
    })

    const goodsId = ref(0)
    const open = (row) => {
        goodsId.value = row.id
        row.bannersLoading = true
        readGoods(goodsId.value).then(res => {
            form.banners = res.goodsBanner.map(o => o.url)
            dialogVisible.value = true
        })
            .finally(() => {
                row.bannersLoading = false
            })
    }
    const emit = defineEmits(["reloadData"])
    const loading = ref(false)
    const submit = () => {
        loading.value = true
        setGoodsBanner(goodsId.value, form)
            .then(res => {
                toast("设置轮播图成功")
                dialogVisible.value = false
                emit("reloadData")
            })
            .finally(() => {
                loading.value = false
            })
    }

    defineExpose({
        open
    })
</script>
